<template>
  <view class="order-page flex flex-col px-32rpx h-full box-border">
    <view class="flex-1 overflow-auto">
      <!-- 删除产品列表 -->
      <view v-if="errorSkuList.length" class="order-item detail-box my-48rpx">
        <view class="detail-title">
          删除产品列表（{{ errorSkuList.length }}/{{ errorSkuList.length + normalSkuList.length }}）
        </view>
        <view class="text-24rpx text-#6B7280 mb-30rpx">
          <span class="font-800 text-#F53F3F ">
            {{ errorSkuList.length }}
          </span>
          个货期异常产品，在提交后将会从该订单中移除，其余商品将会被自动确认
        </view>
        <view class="common-product-list-item" v-for="(item, idx) in errorSkuList" :key="idx">
          <view class="common-product-list-item-left">
            <up-album :urls="[item.skuImageUrl || defaultImg]"></up-album>
            <view>
              <view class="name">
                {{ item?.skuDescription || '' }}
              </view>
              <view class="sub-name">
                好达威SKU:{{ item.skuCode || '' }}
              </view>
              <view v-if="item.supplierSkuCodes?.filter((code: string) => !!code)?.length" class="sub-name">
                商家SKU:{{ item.supplierSkuCodes.join(',') || '' }}
              </view>
            </view>
          </view>
          <view class="common-product-list-item-right">
            <view class="text-right">{{ item.currency?.unitSymbol }}{{ item?.skuUnitPrice || 0 }}</view>
            <view class="text-right">{{ item?.deliveryDays || '' }}天内发货</view>
          </view>
        </view>
      </view>
      <!-- 通过产品列表 -->
      <view v-if="normalSkuList.length" class="order-item detail-box my-48rpx">
        <view class="detail-title">
          通过产品列表（{{ normalSkuList.length }}/{{ errorSkuList.length + normalSkuList.length }}）
        </view>
        <view class="text-24rpx text-#6B7280 mb-30rpx">
          <span class="font-800 text-#00B42A ">
            {{ normalSkuList.length }}
          </span>
          个产品自动通过审核，将于其余10个为改动产品一并移入已确认待发货状态。
        </view>
        <view class="common-product-list-item" v-for="(item, idx) in normalSkuList" :key="idx">
          <view class="common-product-list-item-left">
            <up-album :urls="[item.skuImageUrl || defaultImg]"></up-album>
            <view>
              <view class="name">
                {{ item?.skuDescription || '' }}
              </view>
              <view class="sub-name">
                好达威SKU:{{ item.skuCode || '' }}
              </view>
              <view v-if="item.supplierSkuCodes?.filter((code: string) => !!code)?.length" class="sub-name">
                商家SKU:{{ item.supplierSkuCodes.join(',') || '' }}
              </view>
            </view>
          </view>
          <view class="common-product-list-item-right">
            <view class="text-right">{{ item.currency?.unitSymbol }}{{ item?.skuUnitPrice || 0 }}</view>
            <view class="text-right">{{ item?.deliveryDays || '' }}天内发货</view>
          </view>
        </view>
      </view>
      <!-- 备注 -->
      <view>
        <view class="mb-6rpx">备注</view>
        <up-textarea v-model="notes" placeholder="请输入内容" count></up-textarea>
      </view>
    </view>
    <view class="h-148rpx w-full box-border items-center justify-around flex py-26rpx">
      <up-button color="#1A5FA9" type="primary" text="确认提交" @click="save"></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { supplierPoApprovalQuerySkuListBeforeConfirm, supplierPoApprovalOrderConfirm } from "@/genapi/supplierPoApproval"
import defaultImg from "@/static/default.png"

const errorSkuList = ref([])
const normalSkuList = ref([])
const notes = ref('')
let detailId = ''

onLoad((query) => {
  detailId = query?.id || ''
})

async function getSkuList() {
  const { data } = await supplierPoApprovalQuerySkuListBeforeConfirm({ orderId: detailId, noCancelSku: true })
  if (data?.code !== 200) return
  else {
    const result = data.data
    errorSkuList.value = result.errorSkuList
    normalSkuList.value = result.normalSkuList
  }
}
async function save() {
  const errorPoSkuIds = errorSkuList.value.map((item: any) => +item.id)
  const normalPoSkuIds = normalSkuList.value.map((item: any) => +item.id)
  const apiParams = {
    errorPoSkuIds,
    normalPoSkuIds,
    notes: notes.value,
    poOrderId: +detailId
  }
  const { data } = await supplierPoApprovalOrderConfirm(apiParams)
  if (data?.code !== 200) return
  else {

    uni.navigateBack({
      delta: 1
    })
  }
}

onShow(async () => {
  getSkuList()
})
</script>
<style scoped lang="scss">
.detail-box {
  padding: 16px 0;
}
</style>
